<template>
  <div id="app">
    <div class="app-layout">
      <van-sticky container="app">
        <my-nav-bar :msg="tabBar" />
      </van-sticky>
      <tab-bar ref="tabBar" v-show="isShowTabBar" :dot="unReadMessage"/>
      <div class="inset" :style="{ minHeight: pageMinHeight + 'px' }">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"/>
      </div>
    </div>
  </div>
</template>
<script>
import './assets/icon-iconfont/iconfont.js';
import tabBar from 'components/content/projectTabbar/tab-bar.vue';
import { mapMutations, mapState } from 'vuex';
import myNavBar from 'components/content/navbar/navbar.vue';
import { Sticky } from 'vant';
import 'vant/lib/sticky/style/less';

export default {
    name: 'App',
    data () {
        return {
            userId: '',
            tabBar: ['/', '/profile', '/message', '/orders'],
            unReadMessage: 0, // 总未读消息数
            pageMinHeight: 0 // 页面最小的高度
        };
    },
    components: {
        myNavBar,
        tabBar,
        [Sticky.name]: Sticky
    },
    created () {
        this.userId = localStorage.getItem('id');
        if (this.userId) {
            this.$api.messageApi
                .getAllUnReadMessageNumber({ id: this.userId })
                .then(data => {
                    this.unReadMessage = data.count;
                });
        }
    },
    mounted () {
        // 只执行一次计算tabbar高度
        const tabBarHeight = this.$refs.tabBar && this.$refs.tabBar.$el.clientHeight;
        this.pageMinHeight = this.$util.ScreenCanUseHeight(tabBarHeight);
        this.simpleAssignment({ state: 'tabbarHeight', value: tabBarHeight });
    },
    methods: {
        ...mapMutations(['resetStatus', 'simpleAssignment'])
    },
    computed: {
        // 判断是否显示底部导航
        isShowTabBar () {
            return this.tabBar.some(value => this.$route.path === value);
        },
        ...mapState(['tabbarHeight', 'isLogin', 'userInfo'])
    },
    sockets: {
        // 与服务器连接成功
        connect: function () {
            this.resetStatus({ state: 'clientOnline', status: true });
        },
        // 当与服务器断开连接
        disconnect: function () {
            this.$util.failToast(this.$t('networkWrong'), () =>
                this.resetStatus({ state: 'clientOnline', status: false })
            );
        },
        // 尝试重新连接服务器成功
        reconnect: function () {
            this.resetStatus({ state: 'clientOnline', status: true });
        }
    },
    watch: {
        '$store.state.clientOnline': function (status) {
            if (status && this.userId) {
                this.simpleAssignment({
                    state: 'token',
                    value: localStorage.getItem('token')
                });
                this.$store
                    .dispatch('requestUserInfo', this.userId)
                    .then(() => {
                        this.resetStatus({ state: 'isLogin', status: true }); // 登录状态：已登录
                    })
                    .catch(() => {
                        this.resetStatus({ state: 'isLogin', status: false }); // 登录状态： 未登录
                    });
            }
        },
        $route: function (currentRoutes) {
            const checkTag = this.tabBar.some(v => v === currentRoutes.path);
            if (checkTag) {
                this.pageMinHeight = this.$util.ScreenCanUseHeight(this.tabbarHeight);
            } else {
                this.pageMinHeight = this.$util.ScreenCanUseHeight();
            }
        },
        isLogin: function (status) {
            if (!status) {
                this.unReadMessage = 0;
            }
        }
    }
};
</script>

<style scoped lang="less">
@import "./assets/css/base.css";
@import "./assets/css/global-varible.less";
#app {
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  background-color: @pageBgColor;
  position: relative;
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
